<template>
	<view class="bigBox">
		<view class="box">
			<view class="boxHeader">
				<view class="itemHeader">总金额(元)</view>
				<view class="itemMess">0.00</view>
				<view class="itemHint">今日收益<view class="boxHeaderText">0.00</view>
				</view>
			</view>
			<view class="boxHeader" style="text-align: right;">
				<image src="../../static/asset/earnings.png" class="boxHeaderImg"></image>
				<view class="itemHint">累计收益<view class="boxHeaderText">0.00</view>
				</view>
			</view>
			<view class="boxMain" style="border-right: 1px solid #f7f7f7;" @tap="navTitle('活期')">
				<view class="mainHeader">活期</view>
				<view class="mainMess">灵活整取</view>
			</view>
			<view class="boxMain" @tap="navTitle('定期')">
				<view class="mainHeader">定期</view>
				<view class="mainMess">稳健收益</view>
			</view>
			<view class="boxMain" style="border-right: 1px solid #f7f7f7; padding-top: 60upx; margin-bottom: 40upx;" @tap="navTitle('基金')">
				<view class="mainHeader">基金</view>
				<view class="mainMess">浮动收益</view>
			</view>
			<view class="boxMain" style="padding-top: 60upx; margin-bottom: 40upx;" @tap="navTitle('黄金')">
				<view class="mainHeader">黄金</view>
				<view class="mainMess">多元投资</view>
			</view>
		</view>

		<view class="loans">
			<image src="../../static/asset/loansImg.png"></image>
		</view>

		<view class="hint">
			<view class="navHintLine"></view>
			<view class="navHint">人气精品</view>
		</view>

		<view class="popularity">
			<view class="popularityItem" v-for="item in popularity" :key='item.name'>
				<view class="itemName">{{item.name}}</view>
				<view class="itemNum">{{item.interestRate}}<view style="font-size: 28upx;">%</view></view>
				<view class="itemSynopsis">{{item.synopsis}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popularity: [{
						name: '国华节节高A款',
						interestRate: '5.91',
						synopsis: '历史年化投资回报率'
					},
					{
						name: '宏康小金罐',
						interestRate: '3.94',
						synopsis: '灵活资金近30天年化投资最高'
					}
				]
			}
		},
		methods:{
			navTitle(options) {
				uni.navigateTo({
					url: '/pages/my/myAsset?title='+options
				})
			},
		}
	}
</script>

<style lang="scss">
	.bigBox {
		.box {
			width: 90vw;
			margin: 40upx auto;
			border-radius: 24upx;
			background-color: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.boxHeader {
				width: 35vw;
				margin: 30upx 0 90upx 0;

				.itemHeader {
					font-size: 30upx;
					color: #999999;
				}

				.itemMess {
					font-size: 46upx;
					color: #333333;
					font-weight: bold;
					margin-top: 24upx;
				}

				.itemHint {
					font-size: 26upx;
					color: #999999;
					margin-top: 38upx;

					.boxHeaderText {
						margin-left: 20upx;
						font-size: 34upx;
						color: #333333;
						display: inline-block;
					}
				}

				.boxHeaderImg {
					width: 32upx;
					height: 38upx;
					margin-bottom: 67upx;
				}
			}

			.boxMain {
				width: 35vw;

				.mainHeader {
					font-size: 34upx;
					color: #333333;
				}

				.mainMess {
					padding-top: 18upx;
					font-size: 30upx;
					color: #999999;
				}
			}
		}

		.loans {
			width: 90vw;
			margin: 40upx auto;

			image {
				width: 100vw;
				height: 204upx;
			}
		}

		.hint {
			text-align: center;
			position: relative;

			.navHintLine {
				width: 30%;
				background: #999999;
				position: absolute;
				height: 1rpx;
				top: 50%;
				left: 50%;
				z-index: -2;
				transform: scaleY(0.5) translateX(-50%) translateZ(0);
			}

			.navHint {
				width: 20vw;
				margin: 0 auto;
				font-size: 28upx;
				color: #999999;
				background-color: #f1f1f1;
			}
		}

		.popularity {
			display: flex;
			width: 90vw;
			margin: 0 auto;
			justify-content: space-between;
			margin-top: 20upx;

			.popularityItem {
				width: 43vw;
				padding: 30upx;
				border-radius: 15upx;
				background-color: #FFFFFF;


				.itemName {
					font-size: 28upx;
					color: #333333;
				}

				.itemNum {
					font-size: 44upx;
					color: #f85656;
					margin: 28upx 0 18upx 0;
					display: flex;
					align-items: center;
				}

				.itemSynopsis {
					width: 37vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 24upx;
					color: #999999;
				}
			}
		}
	}
</style>
